<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>消息提示</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://cdn.bootcss.com/zui/1.7.0/css/zui.min.css" rel="stylesheet">
</head>

<body>

    <div id="page" class="">
        <div id="pageBody" class="scrollbar-hover">
           
            <div class="container">
                <div id="pageContent">

                    <section class="">
                        <header>
                            <h3>不同感情色彩的消息框</h3>
                        </header>
                        <article>
                            <p>这里提供了5中色彩的消息框用于不同场合。</p>
                            <div class="example">
                                <div class="alert">
                                    <h4>你好</h4>
                                    <hr>
                                    <p>有一些内容你可能需要知道。</p>
                                </div>
                                <div class="alert alert-primary">
                                    <h4>Hello</h4>
                                    <hr>
                                    <p>World.</p>
                                </div>
                                <div class="alert alert-success">
                                    <h4>太好了!</h4>
                                    <hr>
                                    <strong>一切已准备就绪。</strong>
                                </div>
                                <div class="alert alert-info">
                                    <strong>Hi!</strong> 这条消息可能需要你注意。
                                </div>
                                <div class="alert alert-warning">
                                    <strong>注意!</strong> 看起来遇到一些问题。
                                </div>
                                <div class="alert alert-danger">
                                    <h4>不好了!</h4>
                                    <p>确实遇到了问题，请立即处理吧。</p>
                                </div>
                            </div>
                        </article>
                    </section>




                    <section>
                        <header>
                            <h3>使用图标</h3>
                        </header>
                        <article>
                            <p>在消息框中使用醒目的合适的图标能更容易让用户接收。需要使
                                <code>.alert</code>配合
                                <code>.with-icon</code>参数一起使用。</p>
                            <div class="example">
                                <div class="alert with-icon">
                                    <i class="icon-inbox"></i>
                                    <div class="content">
                                        <h4>你好</h4>
                                        <hr>
                                        <p>有一些内容你可能需要知道。</p>
                                    </div>
                                </div>
                                <div class="alert alert-success with-icon">
                                    <i class="icon-ok-sign"></i>
                                    <div class="content">
                                        <h4>太好了!</h4>
                                        <hr>
                                        <strong>一切已准备就绪。</strong>
                                    </div>
                                </div>
                                <div class="alert alert-primary with-icon">
                                    <i class="icon-star"></i>
                                    <div class="content">
                                        <h4>Hello</h4>
                                        <hr>
                                        <p>World.</p>
                                    </div>
                                </div>
                                <div class="alert alert-info with-icon">
                                    <i class="icon-info-sign"></i>
                                    <div class="content">
                                        <strong>Hi!</strong> 这条消息可能需要你注意。</div>
                                </div>
                                <div class="alert alert-warning with-icon">
                                    <i class="icon-frown"></i>
                                    <div class="content">
                                        <strong>注意!</strong> 看起来遇到一些问题。</div>
                                </div>
                                <div class="alert alert-danger with-icon">
                                    <i class="icon-remove-sign"></i>
                                    <div class="content">
                                        <h4>不好了!</h4>
                                        <p>确实遇到了问题，请立即处理吧。</p>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </section>



                    <section>
                        <header>
                            <h3>使用反色主题</h3>
                        </header>
                        <article>
                            <div class="example">
                                <div class="alert alert-inverse with-icon">
                                    <i class="icon-inbox"></i>
                                    <div class="content">
                                        <h4>你好</h4>
                                        <hr>
                                        <p>有一些内容你可能需要知道。</p>
                                    </div>
                                </div>
                                <div class="alert alert-primary-inverse with-icon">
                                    <i class="icon-star"></i>
                                    <div class="content">
                                        <h4>Hello</h4>
                                        <hr>
                                        <p>World.</p>
                                    </div>
                                </div>
                                <div class="alert alert-success-inverse with-icon">
                                    <i class="icon-ok-sign"></i>
                                    <div class="content">
                                        <h4>太好了!</h4>
                                        <hr>
                                        <strong>一切已准备就绪。</strong>
                                    </div>
                                </div>
                                <div class="alert alert-info-inverse with-icon">
                                    <i class="icon-info-sign"></i>
                                    <div class="content">
                                        <strong>Hi!</strong> 这条消息可能需要你注意。</div>
                                </div>
                                <div class="alert alert-warning-inverse with-icon">
                                    <i class="icon-frown"></i>
                                    <div class="content">
                                        <strong>注意!</strong> 看起来遇到一些问题。</div>
                                </div>
                                <div class="alert alert-danger-inverse with-icon">
                                    <i class="icon-remove-sign"></i>
                                    <div class="content">
                                        <h4>不好了!</h4>
                                        <p>确实遇到了问题，请立即处理吧。</p>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </section>
                    <section>
                        <header>
                            <h3>块级消息</h3>
                        </header>
                        <article>
                            <p>块级消息框将没有外边距和边框圆角，适合用在页面顶部或者浮现在页面之上</p>
                            <div class="example no-padding borderless">
                                <div class="alert alert-success alert-block with-icon">
                                    <i class="icon-ok-sign"></i>
                                    <div class="content">
                                        <strong>太好了!</strong> 一切已准备就绪。</div>
                                </div>
                            </div>
                        </article>
                    </section>




                    <section>
                        <header>
                            <h3>消息框中的链接</h3>
                        </header>
                        <article>
                            <p>当消息框中包含链接时，推荐使用工具栏
                                <code>.alert-link</code>来使得链接的样式与消息框类型保持一致。</p>
                            <div class="example">
                                <div class="alert with-icon">
                                    <i class="icon-inbox"></i>
                                    <div class="content">
                                        <strong>你好!</strong>
                                        <a class="alert-link" href="###">有一些内容</a>你可能需要知道。</div>
                                </div>
                                <div class="alert alert-primary with-icon">
                                    <i class="icon-star"></i>
                                    <div class="content">
                                        <h4>Hello</h4>
                                        <hr>
                                        <p>
                                            <a href="###">World.</a>
                                        </p>
                                    </div>
                                </div>
                                <div class="alert with-icon alert-success">
                                    <i class="icon-ok-sign"></i>
                                    <div class="content">
                                        <strong>太好了!</strong> 一切已
                                        <a class="alert-link" href="###">准备就绪</a>。</div>
                                </div>
                                <div class="alert with-icon alert-info">
                                    <i class="icon-info-sign"></i>
                                    <div class="content">
                                        <strong>Hi!</strong> 这条消息可能
                                        <a class="alert-link" href="###">需要你注意</a>。</div>
                                </div>
                                <div class="alert with-icon alert-warning">
                                    <i class="icon-frown"></i>
                                    <div class="content">
                                        <strong>注意!</strong> 看起来遇到
                                        <a class="alert-link" href="###">一些问题</a>。</div>
                                </div>
                                <div class="alert with-icon alert-danger">
                                    <i class="icon-remove-sign"></i>
                                    <div class="content">
                                        <strong>不好了!</strong> 确实遇到了问题，请
                                        <a class="alert-link" href="###">立即处理</a>吧。</div>
                                </div>
                            </div>
                        </article>
                    </section>



                    <section>
                        <header>
                            <h3>可以关闭的消息框</h3>
                        </header>
                        <article>
                            <p>可以用一个可选的
                                <code>.alert-dismissable</code>和关闭按钮。</p>
                            <div class="example example-alert-dismissable">
                                <div class="alert alert-warning alert-dismissable">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    <strong>注意!</strong> 看起来遇到一些问题。
                                    <p>您可以点击右上角的
                                        <i class="icon-remove"></i> 来关闭这条消息。</p>
                                </div>
                            </div>
                        </article>
                    </section>
                </div>
                <nav></nav>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/zui/1.7.0/js/zui.min.js"></script>
</body>

</html>